<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--  如果侦听到的是一个对象，如果对象中的属性发生了变化，方法格式的侦听器不会触发  -->
<div id="app">
    <input type="text" v-model="message"/>
    <hr/>
    <input type="text" v-model="info.username"/>

</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'admin',
            info: {
                username: 'zs'
            }
        },
        watch: {

            // 监听某一属性
            'info.username'(newValue) {
                console.log(newValue)
            },

            // info: {
            //   handler(newValue) {
            //       console.log(newValue)
            //   },
            //   //   深度监听
            //   deep: true
            // },

           // 定义对象格式的侦听器
            message: {
                handler(newValue,oldValue) {
                    console.log(newValue,oldValue)
                },
                // 立即触发
                immediate: true
            }
        }
    })
</script>
</body>
</html>